<template>
    <div class="app-container">
        <el-card>
            <el-form :inline="true" :model="formInline" :rules="queryRules" ref="formInline" size="mini">
                <el-form-item label="时间范围:" prop="timeRange">
                    <el-date-picker v-model="formInline.timeRange" type="daterange" unlink-panels :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="操作人:" prop="userId">
                    <el-select v-model="formInline.userId" filterable placeholder="操作人">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="itme in operatorsList" :label="itme.name" :value="itme.id" :key="itme.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="操作类型:" prop="actionType">
                    <el-select v-model="formInline.actionType" filterable placeholder="操作类型">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="添加" value="add"></el-option>
                        <el-option label="修改" value="update"></el-option>
                        <el-option label="删除" value="delete"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="平台:" prop="platform">
                    <el-select v-model="formInline.platform" filterable placeholder="平台">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="安卓" value="Android"></el-option>
                        <el-option label="IOS" value="IOS"></el-option>
                        <el-option label="小游戏" value="H5"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="模块:" prop="module">
                    <el-input placeholder="操作模块" v-model="formInline.module">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card :loading="pageLoading" style="margin-top:20px">
            <el-table :data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)" border height="65vh" style="border:1px solid #DFE6EC;">
                <el-table-column v-for="item in tableHeader" :key="item.prop" :prop="item.prop" :label="item.label" align="center" :show-overflow-tooltip="true" :sortable="item.label == '操作' ? false : true">
                    <template slot="header">
                        <span v-if="item.label == '操作'">{{ item.label }}</span>
                    </template>
                    <template slot-scope="scope">
                        <template v-if="item.label == '操作'">
                            <el-button type="success" size="small" @click="handleDiff(scope)">
                                对比
                            </el-button>
                        </template>
                        <span v-else>{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableDataListLen" align="center" style="padding-top:10px">
            </el-pagination>
        </el-card>

        <div>
            <el-dialog :loading="diffDialogLoading" title="值对比" :visible.sync="jsonDiffDialog" @closed="handleDialogClose">
                <code-diff :old-string="oldJsonStr" :new-string="newJsonStr" outputFormat="side-by-side" :context="10">
                </code-diff>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { getLogByCondition, getLogDetail } from "@/api/log";
import { getAllUser } from "@/api/user";
import { deepClone } from "@/utils";
import CodeDiff from "vue-code-diff";
export default {
    name: 'LogIndex',
    data () {
        return {
            pageLoading: false,
            jsonDiffDialog: false,
            diffDialogLoading: false,
            oldJsonStr: '',
            newJsonStr: '',
            queryLogParams: [],
            tableData: [],
            tableDataListLen: 0,
            pageInfo: {
                currentPage: 1,
                pageSizes: [20, 30, 40, 50],
                pageSize: 50,
            },
            operatorsList: [],
            keyWord: "",
            tableHeader: [
                { prop: "id", label: "ID" },
                { prop: "userName", label: "用户名" },
                { prop: "actionType", label: "操作类型" },
                { prop: "module", label: "模块" },
                { prop: "platform", label: "平台" },
                { prop: "date", label: "操作时间" },
                { prop: "createTime", label: "创建时间" },
                { prop: "", label: "操作" },
            ],
            queryRules: {
                timeRange: [{ required: true, message: "请选择时间范围", trigger: "blur" }],
            },
            formInline: {
                module: "",
                platform: [],
                actionType: [],
                timeRange: [],
                userId: "",
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    components: {
        CodeDiff,
    },
    mounted () {
        this.getAllUser()
    },
    methods: {
        //查询用户
        async getAllUser () {
            try {
                let res = await getAllUser();
                this.operatorsList = res.data ? deepClone(res.data) : [];
            } catch (err) {
                console.log(err);
            }
        },

        //查询
        onSubmit () {
            this.$refs.formInline.validate((valid) => {
                if (valid) {
                    this.getAjax();
                }
            });
        },
        async getAjax () {
            this.pageLoading = true;
            let params = {
                actionType: this.formInline.actionType,
                startTime: this.formInline.timeRange[0],
                endTime: this.formInline.timeRange[1],
                platform: this.formInline.platform,
                module: this.formInline.module,
                userId: this.formInline.userId
            }
            try {
                let res = await getLogByCondition(params)
                this.tableData = res.data ? deepClone(res.data) : [];
                this.tableDataListLen = this.tableData.length

                // this.$refs.dataTable.doLayout()
                // this.$refs.dataTable.bodyWrapper.scrollTop = 0

                this.pageLoading = false;
            } catch (err) {
                console.log(err)
                this.pageLoading = false;
            }
        },
        //获取修改类容
        async getDiffValue (logId) {
            this.diffDialogLoading = true
            try {
                let params = {
                    logId: logId
                }
                let res = await getLogDetail(params)
                this.oldJsonStr = res.data.oldContent ? JSON.stringify(JSON.parse(res.data.oldContent), null, 4) : ''
                this.newJsonStr = res.data.newContent ? JSON.stringify(JSON.parse(res.data.newContent), null, 4) : ''
                this.diffDialogLoading = false
            } catch (err) {
                console.log(err)
                this.diffDialogLoading = false
            }
        },
        //打开对比
        handleDiff (scope) {
            this.getDiffValue(scope.row.id)
            this.jsonDiffDialog = true
        },
        handleDialogClose () {
            this.oldJsonStr = ""
            this.newJsonStr = ""
        },
        //分页
        handleSizeChange (pageSize) {
            this.pageInfo.pageSize = pageSize
        },
        handleCurrentChange (currentPage) {
            this.pageInfo.currentPage = currentPage
        },
    }
}
</script>
<style scoped lang="scss">
</style>